<template>
	<view class="addProject">
		<view class="search">
			<i-search @focus="showHistory = true" @blur="showHistory = false" @clear="clear" width="480rpx"
				@change="searchChange" v-model="formData.keyword" margin="none" bgColor="#fff"
				placeholder="项目名称/快捷搜索码搜索"></i-search>
			<view class="search_r" @click="navTo('/pages/business/goAddProject', 'navigateTo')">
				<image src="../../static/images/tjxmadd_icon.png" mode=""></image>
			</view>
		</view>
		<i-historySearch type="historyAddProject" @change="historySearchs"
			v-if="showHistory && getStorage('historyAddProject')"></i-historySearch>
		<view class="project_body">
			<view class="body_left">
				<view @click="selectDict(item.value,index)" class="left_item" :class="{active: active === index}"
					v-for="(item,index) in [{label: '全部', 'value': null},...mer_service_type]" :key="index">
					{{item.label}}
				</view>
			</view>
			<view class="body_R">
				<i-scrollList @more="more" height="calc(100vh - 280rpx)" :total="pageData.total"
					:pageTotal="pageData.list.length">
					<view style="margin-left: 32rpx;" v-for="item in pageData.list" :key="item.id">
						<i-card width="0" bottom="20rpx" @click="saveProject(item)">
							<view class="right_body">
								<view class="r_r">
									<text>{{item.serviceName}}</text>
									<i-price>{{item.price}}</i-price>
								</view>
								<image v-if="selectProject.some(i=>i.id === item.id)"
									src="../../static/images/checked_icon.png" mode=""></image>
								<image v-else src="../../static/images/unchecked_icon.png" mode=""></image>
							</view>
						</i-card>
					</view>
					<view v-if="skeleton" v-for="(item,index) in 8" :key="item"
						style="margin-bottom: 20rpx;margin-left: 32rpx;">
						<i-skeleton size="0" :icon="false" :rowsW="['80%', '60%']" :rowsH="['24rpx', '38rpx']"
							height="144rpx" :rows="2"></i-skeleton>
					</view>
				</i-scrollList>

			</view>
		</view>
		<view class="float_bottom">
			<view class="float_body">
				<i-buttons @click="confirm" radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E">确定
					{{selectProject.length ? ('（' + selectProject.length+ '）'): ''}}</i-buttons>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue';
	import useStore from '../../stores/index'
	import { navTo, getStorage, setStorage, showTost } from '../../utils/common';
	import { getServiceList } from '../../api/business'

	const showHistory = ref(false)
	const skeleton = ref(true)

	const active = ref(0)
	const formData = reactive({
		"tyjPageNum": 1,
		"tyjPageSize": 15,
		serviceType: '',
		keyword: ''
	})


	const pageData = reactive({
		total: 0,
		list: []
	})
	const store = useStore()

	const selectProject = computed(() => store.projectList)
	const mer_service_type = computed(() => store.dictTypes?.mer_service_type || [])

	const historySearchs = (e : string) => {
		formData.keyword = e
		clearData()
		getPageData()
	}
	const searchChange = () => {
		showHistory.value = false
		if (!formData.keyword) {
			return
		}
		const historyAddProject = getStorage('historyAddProject')
		if (!historyAddProject) {
			setStorage('historyAddProject', [formData.keyword])
			return
		} else {
			historyAddProject.unshift(formData.keyword)
			const set = (new Set(historyAddProject))
			setStorage('historyAddProject', [...set].slice(0, 6))
		}
		clearData()
		getPageData()
	}

	onMounted(() => {
		!mer_service_type?.value?.length && store.setDictList('mer_service_type')
	})
	onShow(() => {
		clearData()
		getPageData()
	})

	const getPageData = async () => {
		const data = await getServiceList({...formData, status: '0'})
		pageData.list = pageData.list.concat(data.rows)
		pageData.total = data.total
		skeleton.value = false
	}

	const saveProject = (item : any) => {
		store.addProjectList(item)
	}

	const clear = () => {
		active.value = 0
		formData.serviceType = ''
		clearData()
		getPageData()
	}

	const selectDict = (value : string, index : number) => {
		active.value = index
		clearData()
		formData.serviceType = value
		getPageData()
	}
	const clearData = () => {
		formData.tyjPageNum = 1
		pageData.list = []
		pageData.total = 0
		skeleton.value = true
	}
	const more = () => {
		formData.tyjPageNum++
		getPageData()
	}
	const confirm = () => {
		if (!selectProject?.value?.length) {
			showTost('请至少选择一项项目')
			return
		}
		navTo('', 'navigateBack')
	}
</script>

<style lang="scss" scoped>
	.addProject {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f3f4f5;

		.search {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexRS;
			height: 44px;

			.search_r {
				width: 72rpx;
				height: 72rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}
		}

		.project_body {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			margin-top: 40rpx;
			@include flexRS;

			.body_left {
				width: 180rpx;
				overflow-y: scroll;
				border-right: 2rpx solid #E6E6EB;
				height: calc(100vh - 280rpx);

				.left_item {
					height: 88rpx;
					line-height: 88rpx;
					@include dfont(26rpx);
					@include overflow;
					color: #A0A0AD;
				}

				.active {
					@include dWeight;
					color: #16161F;
					border-right: 4rpx solid #FB652E;
					transition: color 0.3s ease-out;
				}
			}

			.body_R {
				// overflow-y: scroll;
				overflow: hidden;
				width: calc(100% - 180rpx);
				;

				.right_body {
					@include flexRS;

					.r_r {
						@include flexC;
						width: 85%;
						text {
							width: 100%;
							@include titlefont(28rpx);
							@include overflow;
							margin-bottom: 8rpx;
						}
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}

	.float_bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0 63rpx 0;

		.float_body {
			@include flexC;
			width: calc(100% - 64rpx);
			margin: 0 auto;
		}
	}
</style>